<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe624;</div>
    </div>
    <div class="header-input">输入城市/景点/游玩主题</div>
    <div class="header-right">
      城市<span class="iconfont arrow-icon">&#xe62d;</span>
    </div>

  </div>
</template>

<script>
export default{
  name:'Header',
  el:'Header'
}
</script>
<!-- stylus是css的预处理包，即可以将代码处理成css -->
<!-- scoped的作用为此css中header只对此页面里的class=header有用 -->
<!-- 由于使用stylus，所以写法与css不一致 -->
<!-- dispaly:flex是一种布局方式，弹性布局 -->
<!-- flex=1可以实现三个盒子均分区域 -->
<!-- @import：在样式中引入样式必须用@ -->
<!-- rem*font-size=px -->
<!-- 在build文件夹中webpack.base中可以别名文件夹路径 -->
<style lang="scss" scoped>
 
  .header{
    display:flex;
    line-height: 86px;
    color:#fff;
  }
    
    .header-left{
      width:64px;
      float:left;
    }
      
      .back-icon{
         text-align:center;
       font-size:14px;
      }
      

    .header-input{
       flex: 1px;
      margin-top: 12px;
      height:12px;
      line-height: 24px;
      margin-left: 24px;
      padding-left:24px;
      background:#FFFFFF;
      border-radius: 24px;
      color:#CACACA;
    }
     

    .header-right{
       width:100px;
      float:right;
      text-align:center;
    }
     
      .arrow-icon{
        font-size: 14px;
      }
        

</style>
-->